<template>
	<view class="container">
		<view class="sub_box">
			<u-subsection :list="list" :current="curNow" mode="subsection" @change="sectionChange"></u-subsection>
			<!-- <list-header-filter list="list" num="1"></list-header-filter> -->
		</view>

		<GuessLike v-if="curNow === 1&&guessTotal!=0" :guess-list="guessDishList" />
		<view v-if="curNow===1&& guessTotal==0">
			<u-empty
			        mode="list"
			        icon="http://cdn.uviewui.com/uview/empty/list.png"
			>
			</u-empty>
		</view>
		<HotLike v-if="curNow === 0" :hot-list="hotDishList"/>

	</view>

</template>
<script>
	import {
		request
	} from '@/common/request.js'
	import GuessLike from '@/components/GuessLike.vue'
	import HotLike from '@/components/HotDish.vue'
	// import ListHeaderFilter from '@/components/ListHeadFilter.vue'
	export default {
		data() {
			return {
				list: ['本店爆款', '猜你喜欢'],
				curNow: 0,
				guessTotal:0,
				hotDishList:[],
				guessDishList:[],
			}
		},
		components: {
			GuessLike,
			HotLike
		},
		onLoad() {
			this.getGuessDish()
			this.getHotDish()
			// this.getDish()
		},

		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			// 获取推荐菜品
			getHotDish() {
				request({
					url: '/hotDish'
				}).then(res => {
					console.log('hotDish=>',res)
					this.hotDishList = res.dishList
				})
			},
			// 猜你喜欢
			getGuessDish(){
				request({
					url: '/guessLike'
				}).then(res => {
					console.log('guessDish=>',res)
					this.guessDishList = res.dishList
					this.guessTotal = res.total
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 40px 10px;
	}
	.sub_box{
		width: 100%;
		position: fixed;
		// opacity: 0;
		top:0;
		left:0;
		z-index: 1;
		background-color: #fff;
	}
</style>
